{% extends "base.html" %}
{% block title %}
    <title>用户注册</title>
{% endblock %}


{% block content %}
    <div class="jumbotron">
        <h1>甲基化早筛项目数据库管理系统Demo</h1>
        <form id="registerForm">
            <div class="form-inline">
                <h4>用户注册</h4>&nbsp;&nbsp;
                <a href="{% url 'login' %}">已有账户登录</a>
            </div>
            {% csrf_token %}
            <div class="form-group">
                <label for="username"> 用户名</label>
                <input type="text" class="form-control" id="username" name="username"
                       placeholder="请输入用户名" required="true">
            </div>
            <div class="form-group">
                <label for="password1"> 密码</label>
                <input type="password" class="form-control" id="password1" name="password1"
                       placeholder="请输入密码" required="true">
                <p id="password1Error">密码必须包含至少 8 个字符，不能全部为数字。</p>
            </div>
            <div class="form-group">
                <label for="password2"> 密码</label>
                <input type="password" class="form-control" id="password2" name="password2"
                       placeholder="请再次输入密码" required="true">
                <p id="password2Error"></p>
            </div>
            <div class="form-group">
                <label for="nick_name"> 昵称</label>
                <input type="text" class="form-control" id="nick_name" name="nick_name"
                       placeholder="请输入昵称" required="true">
            </div>
            <div class="form-group">
                <label for="email"> 邮箱地址</label>
                <input type="email" class="form-control" id="email" name="email"
                       placeholder="请输入邮箱地址" required="true">
                <p id="emailError"></p>
            </div>
            <button type="submit" class="btn btn-success btn-block"
                    id="registerSubmit">注册
            </button>
            <input type="hidden" name="next" value="{{ next }}"/>
        </form>
        <p id="registerError"></p>
        <div id="formError">
        </div>
    </div>
{% endblock %}


{% block extra_js %}
    <script>
        $(document).ready(function () {
            $('#password1').change(function () {
                if ($('#password2').val() === $('#password1').val()) {
                    $('#password2Error').text('');
                }
            });

            $('#password2').change(function () {
                if ($('#password2').val() !== $('#password1').val()) {
                    $('#password2Error').text('前后密码不一致，请重新输入正确密码。');
                } else {
                    $('#password2Error').text('');
                }
            });

            $('#email').change(function () {
                let str = $('#email').val();
                let n = str.search(/^\w+@\w+\.\w+/i);
                if (n === -1) {
                    $('#emailError').text('邮箱地址不正确，请重新输入正确的邮箱地址。');
                } else {
                    $('#emailError').text('');
                }
            });

            $('#registerSubmit').click(function (e) {
                $('#registerError').text('');
                $('#formError').empty();
                e.preventDefault();
                let data_tmp = $('input').serialize();
                $.ajax({
                    url: {% url 'register' %},
                    data: data_tmp,
                    method: 'POST',
                    async: false,
                    dataType: 'json',
                    success: function (data) {
                        if (data['error_msg']) {
                            $('#registerError').text('注册失败。原因：' + data['error_msg']);
                        } else if (data['form_errors']) {
                            $('#registerError').text('注册失败。原因：');
                            $('#formError').append(data['form_errors']);
                        } else {
                            $('#registerError').text(data['success_msg']);
                            setTimeout(
                                function () {
                                    window.location.href = "{% url 'index' %}" + "{{ next }}"
                                }, 3000
                            );
                        }
                    }
                });
            });

            $('#username').blur(function () {
                $('#nick_name').val($('#username').val());
            });

        })

    </script>
{% endblock %}